import { useSelector, useDispatch } from "react-redux";
// 导入actionCreater
import { inscrement, decscrement, addToNum } from "../store/model/counterStore.js";
import { fetchChannelList } from '../store/model/channelStore.js'
import { useEffect } from "react";
function App() {
  const { count } = useSelector(state => state.counter)
  const { channelList } = useSelector(state => state.channel)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(fetchChannelList())
  }, [dispatch])
  return (
    <>
      <button onClick={() => dispatch(decscrement())}>-</button>
      {count}
      <button onClick={() => dispatch(inscrement())}>+</button>
      <button onClick={() => dispatch(addToNum(10))}>to10</button>
      <button onClick={() => dispatch(addToNum(20))}>to20</button>
      <ul>
        {channelList.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>
    </>
  )
}

export default App 